<!DOCTYPE html>
<html>
<head>
  <title>Physics Pulley System</title>
</head>
<body>
  <canvas id="physicsCanvas" width="500" height="600"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define parameters for drawing
    const cx = canvas.width / 2; // Center X
    const groundY = 520;
    const pulleyY = 180;
    const pulleyRadius = 50;
    const blockGray = '#cccccc';
    const pulleyGray = '#808080';
    const bracketGray = '#dcdcdc';

    // --- Drawing Functions ---

    // Draw the ground line
    function drawGround() {
      ctx.beginPath();
      ctx.moveTo(40, groundY);
      ctx.lineTo(canvas.width - 40, groundY);
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'black';
      ctx.stroke();
    }

    // Draw a block with a label
    function drawBlock(x, y, width, height, label) {
      ctx.fillStyle = blockGray;
      ctx.fillRect(x, y, width, height);
      ctx.strokeRect(x, y, width, height);

      ctx.fillStyle = 'black';
      ctx.font = 'bold 30px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(label, x + width / 2, y + height / 2);
    }

    // Draw the pulley system (pulley, bracket, rope)
    function drawPulleySystem() {
      // Define positions based on pulley
      const ropeLeftX = cx - pulleyRadius;
      const ropeRightX = cx + pulleyRadius;

      // Block A dimensions and position
      const blockA_width = 90;
      const blockA_height = 130;
      const blockA_x = ropeLeftX - blockA_width / 2;
      const blockA_y = groundY - blockA_height;

      // Block B dimensions and position
      const blockB_width = 70;
      const blockB_height = 70;
      const blockB_x = ropeRightX - blockB_width / 2;
      const blockB_y = groundY - blockB_height;

      // Draw Blocks
      drawBlock(blockA_x, blockA_y, blockA_width, blockA_height, 'A');
      drawBlock(blockB_x, blockB_y, blockB_width, blockB_height, 'B');

      // Draw Rope
      ctx.beginPath();
      ctx.moveTo(ropeLeftX, blockA_y); // From top of block A
      ctx.lineTo(ropeLeftX, pulleyY); // Up to pulley
      ctx.arc(cx, pulleyY, pulleyRadius, Math.PI, 0); // Over the pulley (180 to 0 degrees)
      ctx.lineTo(ropeRightX, blockB_y); // Down to top of block B
      ctx.stroke();

      // Draw Pulley Wheel
      ctx.fillStyle = pulleyGray;
      ctx.beginPath();
      ctx.arc(cx, pulleyY, pulleyRadius, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
      
      // Draw Bracket
      const bracketWidth = 22;
      const bracketHeight = 60;
      const bracketX = cx - bracketWidth / 2;
      const bracketY = pulleyY - bracketHeight;
      ctx.fillStyle = bracketGray;
      ctx.fillRect(bracketX, bracketY, bracketWidth, bracketHeight);
      ctx.strokeRect(bracketX, bracketY, bracketWidth, bracketHeight);

      // Return bracket top y for force vector
      return bracketY;
    }

    // Draw the force vector F
    function drawForce(startY) {
      const endY = 50;
      ctx.beginPath();
      ctx.moveTo(cx, startY);
      ctx.lineTo(cx, endY);

      // Arrowhead
      const arrowSize = 12;
      ctx.moveTo(cx, endY);
      ctx.lineTo(cx - arrowSize / 1.5, endY + arrowSize);
      ctx.moveTo(cx, endY);
      ctx.lineTo(cx + arrowSize / 1.5, endY + arrowSize);
      ctx.stroke();
      
      // Label "F"
      ctx.font = 'italic bold 30px Arial';
      ctx.textAlign = 'left';
      ctx.textBaseline = 'middle';
      ctx.fillText('F', cx + 15, endY + 10);
    }
    
    // Draw the caption
    function drawCaption() {
        ctx.fillStyle = 'black';
        ctx.font = '28px "SimSun", "Microsoft YaHei", sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'alphabetic';
        ctx.fillText('习题 1-29 图', cx, groundY + 45);
    }

    // --- Main Drawing Execution ---
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    drawGround();
    const bracketTopY = drawPulleySystem();
    drawForce(bracketTopY);
    drawCaption();

  </script>
</body>
</html>